import styles from './Login.less'
import { DEFAULT_LOGO, DEFAULT_NAME } from '@/constants'
import { useModel, useSearchParams, history } from '@umijs/max'

import { LockOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons'
import { LoginForm, ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-components'
import { Tabs, App } from 'antd'
import { useState } from 'react'
import { setCookie, getDomain, setAccessToken } from '@/utils/utils'

const Login = () => {
  const { message } = App.useApp()
  const { Login, GetCapture } = useModel('Global')
  const [searchParams] = useSearchParams()

  const handleSubmit = (values: any) => {
    const { autoLogin } = values

    Login(values).then((res: any) => {
      if (res) {
        const target = searchParams.get('target') || '/'
        message.success('登录成功')
        const { access_token, user } = res

        setAccessToken(access_token, autoLogin)
        setCookie('autoL', autoLogin, getDomain(), autoLogin)

        history.push(target || '/')
      }
    })
  }

  return (
    <div className={styles.login_content}>
      <LoginForm
        title={'合伙人数据开放平台'}
        subTitle=' '
        initialValues={{
          autoLogin: true
        }}
        onFinish={async values => {
          handleSubmit(values)
        }}
        className={styles.login_form_block}
      >
        <>
          <ProFormText
            fieldProps={{
              size: 'large',
              prefix: <MobileOutlined className={'prefixIcon'} />
            }}
            name='account'
            placeholder={'手机号'}
            rules={[
              {
                required: true,
                message: '请输入手机号！'
              },
              {
                pattern: /^1\d{10}$/,
                message: '手机号格式错误！'
              }
            ]}
          />
          <ProFormCaptcha
            fieldProps={{
              size: 'large',
              prefix: <LockOutlined className={'prefixIcon'} />
            }}
            captchaProps={{
              size: 'large'
            }}
            placeholder={'请输入验证码'}
            captchaTextRender={(timing, count) => {
              if (timing) {
                return `${count} 获取验证码`
              }
              return '获取验证码'
            }}
            name='code'
            phoneName='account'
            rules={[
              {
                required: true,
                message: '请输入验证码！'
              }
            ]}
            onGetCaptcha={async (account: string) => {
              //  获取验证码
              let params = {
                account
              }
              let res = await GetCapture(params)
              if (res) {
                message.success('获取验证码成功,请注意查收')
              }
            }}
          />
        </>
        <div
          style={{
            marginBlockEnd: 24
          }}
        >
          <ProFormCheckbox noStyle name='autoLogin'>
            自动登录
          </ProFormCheckbox>
          {/* <a
            style={{
              float: 'right'
            }}
          >
            忘记密码
          </a> */}
        </div>
      </LoginForm>
    </div>
  )
}

export default Login
